<!--
 * @Description: 货架页面
 * @Author: lwx
 * @Date: 2022-12-08 15:22:00
 * @LastEditors: lwx
 * @LastEditTime: 2023-04-21 14:32:24
-->
<template>
  <div class="fillcontain d-flex">
     <div class="store-left panel">
        <div class="panel-title d-flex jc-between">
          <div>货架信息</div>
        </div>
        <div class="card-slot">
           <div class="card-item" v-for="(card,index) in cabinet" :key="card.cabinet_id">
             <div class="header">
               <span class="round" :class="card.status===false?'cyan':'bgRed'"></span>
               <span>卡槽-0{{index+1}}</span>
             </div>
             <!-- <div class="p-1"> -->
              <img src="@/assets/img/empty.png" class="card-image" v-if="card.status===false">
              <img src="@/assets/img/full.jpg" class="card-image" v-else>
             <!-- </div> -->
             <div class="text-center mt-2">
                <!-- <el-button type="success" size="mini"  @click="inStoreBtn(card.cabinet_id)">入库</el-button> -->
                <el-button type="success" size="mini" @click="outStoreBtn(card.cabinet_id)">出库</el-button>
             </div>
           </div>
        </div>
     </div>
     <div class="store-right">
       <div class="right-top panel">
          <div class="panel-title">数量记录</div>
          <div class="today-number">
             <!-- <div class="num-style">
               <div>今日累计入库数</div>
               <div class="amount">{{time_on_number}}</div>
             </div> -->
             <div class="num-style">
               <div>今日累计出库数</div>
               <div class="amount">{{time_off_number}}</div>
             </div>
          </div>
       </div>
       <div class="right-bottom panel">
          <div class="d-flex jc-between">
             <div class="panel-title">今日立库</div>
             <a class="more" @click="$router.push('/sto/history')">历史记录></a>        
          </div>
          <el-table
             size="mini"
             :data="shelvesList"
             style="width: 100%;height:335px"
             border
             align="center">
             <el-table-column
               prop="shelves_id"
               label="卡槽"
               align="center"
               width="50">
             </el-table-column>
             <el-table-column
               prop="barcodes"
               label="产品码"
               align="center">
             </el-table-column>
             <el-table-column 
               prop="time_off" 
               label="出库时间" 
               align="center">
             </el-table-column>
          </el-table>
       </div>
     </div>
  </div>
</template>

<script>
import {getCabinet,outStore,shelvesAmount,shelvesList} from '@/api/store.js'
export default {
  data () {
    return {
        cabinet:[],
        shelvesList:[],
        // time_on_number:0,//今日入库数量
        time_off_number:0,//进入出库数量
        timer:null,
    }
  },
  created() {
    this.getCabinetInfo()//获取货架信息
    this.getCabinetAmount()//今日出入库数量
    this.getShelvesList()//获取出入库信息记录
     if(this.timer){
       clearInterval(this.timer)
    }else{
    this.timer=setInterval(()=>{
       this.getCabinetAmount()
       this.getShelvesList()
      },1000*60*3)  //3分钟请求一次
    } 
  
  },
   beforeDestroy(){
    clearInterval(this.timer)
    this.timer=null
  },
  methods:{
    //货架信息
   async getCabinetInfo(){
    const {data} = await getCabinet(1)
    this.cabinet=data
   },
   //入库
  //  async inStoreBtn(cabinet_id){
  //   await inStore({cabinet_id})
  //   this.$message.success('入库成功！')
  //  },
   //出库
   async outStoreBtn(cabinet_id){
    await outStore(cabinet_id)
    this.$message.success('出库成功！')
   },
   //今日出入库数量
   async getCabinetAmount(){
    const {data} = await shelvesAmount()
    //  this.time_on_number=data.time_on_number
     this.time_off_number=data.time_off_number 
   },
   //出入库信息记录
   async getShelvesList(){
    const {data} = await shelvesList()
    this.shelvesList=data
  },
 }
}
</script>
<style lang='scss' scoped>
.store-left{
    flex:2.5;
    margin-right: 15px;
    .status-text{
      font-size: 14px;
      color: #909399;
    }
}
.store-right{
    flex:1;
    .right-top{
      height: 160px;
      margin-bottom: 15px;
    }
    .right-bottom{
      height:410px
    }
}
.panel{
   background-color: #fff;
   padding:20px;
}
.panel-title{
  font-size: 17px;
  font-weight: 600;
  color: #6acca3;
  margin-bottom:15px;
}
.more{
  font-size: 12px;
  padding:10px;
  &:hover,&:focus{
    color: #409EFF;
  }
}
.card-slot{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.card-item{
    width: 18%;
    height: 250px;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 10px;
    font-size:14px;
    background-color: #FAFAFA;
    .header{
        width: 100%;
        border-bottom: 1px solid #ebeef5;
        padding-bottom: 10px;
        font-weight: 600;
        color: #909399;
        text-align: center;
    }
}
.card-image{
    width: 100%;
    height: 160px;
}
.today-number{
  display: flex;
  color: #909399;
  .num-style{
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    background: #FAFAFA;
    padding: 15px 0;
  }
  .amount{
    color:#6acca3;
    margin-top: 15px;
    font-size: 20px;
  }
}
.el-button--success {
    background-color: #42b983;
    border-color: #42b983;
}

.el-button--success.is-active,
.el-button--success:active {
    background: #63cba0;
    border-color: #63cba0;
    color: #fff;
}

.el-button--success:focus,
.el-button--success:hover {
    background: #63cba0;
    border-color: #63cba0;
    color: #fff;
}
</style>